<template>
  <div class="app-container">
    <div class="filter-container">
      <SearchBar :start-date="searchForm.startDate" :end-date="searchForm.endDate" :showp-pf-channel="true" @transferFilter="handleFilter" />
      <el-button :loading="downloadLoading" type="primary" icon="el-icon-download" class="filter-item" @click="handleDownload()">导出</el-button>
      <span style="float: right;">充值账号：{{ account }}，充值角色：{{ actor }}，充值金额：{{ total_amount }}</span>
    </div>
    <el-table v-loading="listLoading" :data="list" class="mt-10" border height="735">
      <el-table-column label="ID编号" prop="id" width="50px" align="center"></el-table-column>
      <el-table-column label="订单号" prop="orderid" width="200px" align="center"></el-table-column>
      <el-table-column label="订单金额" prop="amount" width="60px" align="center"></el-table-column>
      <el-table-column label="支付金额" prop="pay_amount" width="60px" align="center"></el-table-column>
      <el-table-column label="充值ID" prop="recharge_id" width="55px" align="center"></el-table-column>
      <el-table-column label="商品名称" prop="recharge_name" width="127px" align="center"></el-table-column>
      <el-table-column label="订单来源" width="60px" align="center">
        <template slot-scope="{row}">
          <span v-if="row.source === 2">线下</span>
          <span v-else>内购</span>
        </template>
      </el-table-column>
      <el-table-column label="服务器" prop="sname" width="70px" align="center"></el-table-column>
      <el-table-column label="账号" prop="account" width="140px" align="center"></el-table-column>
      <el-table-column label="角色ID" prop="actor_id" width="100px" align="center"></el-table-column>
      <el-table-column label="角色名" prop="actor_name" width="105px" align="center"></el-table-column>
      <el-table-column label="等级" prop="level" width="50px" align="center"></el-table-column>
      <el-table-column label="VIP等级" prop="vip" width="50px" align="center"></el-table-column>
      <el-table-column label="渠道ID" prop="cid" width="65px" align="center"></el-table-column>
      <el-table-column label="包ID" prop="cpid" width="70px" align="center"></el-table-column>
      <el-table-column label="订单类型" width="85px" align="center">
        <template slot-scope="{row}">
          <el-tag :type="row.status | statusTagFilter">{{ row.status | statusFilter }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="create_dt" width="135px" align="center"></el-table-column>
      <el-table-column label="支付时间" prop="pay_dt" width="135px" align="center"></el-table-column>
      <el-table-column label="注册时间" prop="register_dt" width="135px" align="center"></el-table-column>
      <el-table-column label="账号首充" prop="account_first_pay" width="60px" align="center"></el-table-column>
      <el-table-column label="角色首充" prop="actor_first_pay" width="60px" align="center"></el-table-column>
      <el-table-column align="center" label="操作" width="60px">
        <template slot-scope="{row}">
          <div v-if="(row.status === -1 || row.status === 2)">
            <el-button v-if="row.is_sup===0" type="text" size="small" @click="handleSupplementBtn(row)">补单</el-button>
            <el-button v-if="row.is_sup===1" type="text" size="small">
              <router-link :to="'/gm/game/order/supplement/' + row.orderid" class="filter-item">
                <el-button type="text">查看</el-button>
              </router-link>
            </el-button>
            <el-button v-if="row.is_sup===2" type="text" size="small">审核中</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog :visible.sync="dialogVisible" title="补单" width="40%" :close-on-click-modal="false">
      <el-form ref="dataForm" :model="dataForm" label-width="100px" label-position="left">
        <el-form-item label="订单选项" prop="order_type">
          <el-select v-model="dataForm.order_type" class="defaut-input">
            <el-option label="限时代金卷" value="1" />
            <el-option label="代金卷" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="金额数量" prop="num">
          <el-input v-model="dataForm.num" class="defaut-input" placeholder="代金卷数量" />
        </el-form-item>
      </el-form>
      <div class="tr">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirmSubmit()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SearchBar from './components/SearchBar'
import { objectMerge } from '@/utils'
import Pagination from '@/components/Pagination'
import { getRechargeOrder } from '@/api/statis'
import { handleSupplement } from '@/api/gm'

const defaultItem = {
  id: '',
  sid: '',
  actor_id: '',
  orderid: '',
  recharge_id: '',
  order_amount: '',
  pay_amount: '',
  order_dt: '',
  actor_name: '',
  level: '',
  vip: '',
  order_type: '',
  num: ''
}
export default {
  name: 'RechargeOrder',
  components: { SearchBar, Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        0: '未支付',
        1: '已到账',
        2: '未到账',
        '-1': '异常订单'
      }
      return statusMap[status]
    },
    statusTagFilter(status) {
      const statusTagMap = {
        0: 'primary',
        1: 'success',
        2: 'warning',
        '-1': 'danger'
      }
      return statusTagMap[status]
    }
  },
  data() {
    return {
      list: [],
      headList: [],
      total_amount: 0,
      total: 0,
      account: 0,
      actor: 0,
      listQuery: {
        page: 1,
        limit: 1000
      },
      dataForm: Object.assign({}, defaultItem),
      listLoading: false,
      dialogVisible: false,
      downloadLoading: false,
      searchForm: {
        startDate: new Date(Date.now() - 86400000 * 7),
        endDate: new Date()
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleFilter(query) {
      this.searchForm = objectMerge(query, this.listQuery)
      this.getList()
    },
    async getList() {
      this.listLoading = true
      const res = await getRechargeOrder(this.searchForm)
      this.listLoading = false
      this.list = res.data.items
      this.total_amount = res.data.total_amount
      this.total = res.data.total
      this.account = res.data.account
      this.actor = res.data.actor
    },
    handleSupplementBtn(row) {
      this.dialogVisible = true
      this.dataForm.sid = row.sid
      this.dataForm.actor_id = row.actor_id
      this.dataForm.orderid = row.orderid
      this.dataForm.recharge_id = row.recharge_id
      this.dataForm.order_amount = row.order_amount
      this.dataForm.pay_amount = row.pay_amount
      this.dataForm.order_dt = row.create_dt
      this.dataForm.actor_name = row.actor_name
      this.dataForm.level = row.level
      this.dataForm.vip = row.vip
      this.dataForm.orderid = row.orderid
      this.dataForm.order_type = ''
      this.dataForm.num = ''
    },
    confirmSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          handleSupplement(this.dataForm).then(response => {
            if (response.status) {
              this.dialogVisible = false
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.getList()
            } else {
              this.message.error(response.message)
            }
          })
        }
      })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['ID编号', '订单号', '订单金额', '支付金额', '充值ID', '商品名称', '订单来源', '服务器', '账号', '角色ID', '角色名', '角色等级', 'VIP等级', '渠道ID', '包ID', '订单类型', '支付时间', '注册时间', '账号首充', '角色首充']
        const filterVal = ['id', 'orderid', 'amount', 'pay_amount', 'recharge_id', 'recharge_name', 'source', 'sname', 'account', 'actor_id', 'actor_name', 'level', 'vip', 'cid', 'cpid', 'status', 'create_dt', 'register_dt', 'account_first_pay', 'actor_first_pay']
        const data = this.formatJson(filterVal)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '订单查询'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal) {
      return this.list.map(v => filterVal.map(j => {
        return v[j]
      }))
    }
  }
}
</script>
